import React, { Component } from "react"
import "./shouye.scss"
import Public from "../public"
import Swiper from "swiper"
import "swiper/dist/css/swiper.min.css"
import "swiper/dist/js/swiper.min.js"
import {connect} from "react-redux";
import actionCreator from "./actionCreator";

class Shouye extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: ["iconfont icon-34", "iconfont icon-chuizi", "iconfont icon-icon19 right"]
        }

    }

    componentDidMount() {
        // 获取数据
        this.props.getProdId()
        this.props.getDate()

        // 轮播图
        var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            autoplay: {
                delay: 1500,
                disableOnInteraction: false,
            }, 
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
        })

    }

<<<<<<< HEAD
=======
            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })

    }

>>>>>>> 45218d0a241582608cff601ba41517043e399c00
    goDetail(id) {
        this.props.history.push("/detail", {id})
    }

    render() {
        console.log(this.props.shouye)
        let {hotProd, bagDress, parts, breathing, phone, dataList} = {...this.props.shouye}
        // "热销产品"
        let hotList = dataList.filter(m =>
            hotProd.filter((x) => Number(x) === Number(m.id) ).length > 0)
        // "服饰箱包"
        let bagDressList = dataList.filter(m =>
            bagDress.filter((x) => Number(x) === Number(m.id) ).length > 0)
        // "官方配件"
        let partsList = dataList.filter(m =>
            parts.filter((x) => Number(x) === Number(m.id) ).length > 0)
        // "畅呼吸"
        let breathingList = dataList.filter(m =>
            breathing.filter((x) => Number(x) === Number(m.id) ).length > 0)
        // "官方配件"
        let phoneList = dataList.filter(m =>
            phone.filter((x) => Number(x) === Number(m.id) ).length > 0)

        let { list } = this.state
        return <div className="shouye">
            <Public list={list} />
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">
                        <img src={require('../../img/photo1.jpg')} alt=""/>
                    </div>
                    <div className="swiper-slide">
                        <img src={require('../../img/photo2.jpg')} alt=""/>
                    </div>
                </div>
                {/* 如果需要分页器  */}
                <div className="swiper-pagination"></div>
            </div>
            <div className="floor-container">
                <section className="section-floor">
                    <div className="floor-title">
                        <a href="#">
                            <div className="title">
                                <h2>热销商品</h2>
                                <span>></span>
                            </div>
                        </a>
                    </div>
                    <div className="container">
                        <ul className="container-item">
                            {
                                hotList.map(item => {
                                    return <li className="prod-item" key={item.id} onClick={this.goDetail.bind(this, item.id)}>
                                        <div className="item-show">
                                            <a href="" className="item-img">
                                                <img src={item.shop_info.ali_image}/>
                                            </a>
                                            <div className="item-info">
                                                <h4>{item.shop_info.title}</h4>
                                                <p className="sub_title">{item.shop_info.sub_title}</p>
                                                <p className="price"><i>¥</i>
                                                    <span>{item.price}</span>
                                                    {/*<span className="">*/}
                                                    {/*<i>¥</i>*/}
                                                    {/*<span>{item.spu.price}</span>*/}
                                                    {/*    </span>*/}
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </section>
            </div>
            <div className="floor-container">
                <section className="section-floor">
                    <div className="floor-title">
                        <a href="#">
                            <div className="title">
                                <h2>服饰箱包</h2>
                                <span>></span>
                            </div>
                        </a>
                    </div>
                    <ul className="box-products-items">
                        {
                            bagDressList.map(item => {
                                return <li key={item.id} className="box-item">
                                    <div className="bag-container">
                                        <img src={item.shop_info.ali_image} alt=""/>
                                        <div className="bag-info">
                                            <h5>{item.spu.name}</h5>
                                            <p className="p-info">{item.shop_info.sku_mobile_sub_title}</p>
                                            <div className="color"></div>
                                            <div className="item-price">
                                                <p className="price">
                                                    <i>¥</i>
                                                    <span>{item.price}</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            })
                        }
                    </ul>
                </section>
            </div>
            <div className="floor-container">
                <section className="section-floor">
                    <div className="floor-title">
                        <a href="#">
                            <div className="title">
                                <h2>官方配件</h2>
                                <span>></span>
                            </div>
                        </a>
                    </div>
                    <div className="our-parts-item">
                        <ul className="parts-item">
                            {
                                partsList.map(item => {
                                    return <li key={item.id}>
                                        <div className="parts-box-item">
                                            <a href="">
                                                <img src={item.shop_info.ali_image} alt=""/>
                                            </a>
                                            <div className="parts-li">
                                                <h4>{item.name}</h4>
                                                <p>{item.shop_info.sub_title}</p>
                                                <div className="parts-price">
                                                    <i>￥</i>
                                                    <span>{item.price}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </section>
            </div>
            <div className="floor-container">
                <section className="section-floor">
                    <div className="floor-title">
                        <a href="#">
                            <div className="title">
                                <h2>畅呼吸</h2>
                                <span>></span>
                            </div>
                        </a>
                    </div>
                    <div className="our-parts-item">
                        <ul className="parts-item">
                            {
                                breathingList.map(item => {
                                    return <li key={item.id}>
                                        <div className="parts-box-item">
                                            <a href="">
                                                <img src={item.shop_info.ali_image} alt=""/>
                                            </a>
                                            <div className="parts-li">
                                                <h4>{item.name}</h4>
                                                <p>{item.shop_info.sub_title}</p>
                                                <div className="parts-price">
                                                    <i>￥</i>
                                                    <span>{item.price}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </section>
            </div>
            <div className="floor-container">
                <section className="section-floor">
                    <div className="floor-title">
                        <a href="#">
                            <div className="title">
                                <h2>坚果系列手机及固件</h2>
                                <span>></span>
                            </div>
                        </a>
                    </div>
                    <div className="our-parts-item">
                        <ul className="parts-item">
                            {
                                phoneList.map(item => {
                                    return <li key={item.id}>
                                        <div className="parts-box-item">
                                            <a href="">
                                                <img src={item.shop_info.ali_image} alt=""/>
                                            </a>
                                            <div className="parts-li">
                                                <h4>{item.name}</h4>
                                                <p>{item.shop_info.sub_title}</p>
                                                <div className="parts-price">
                                                    <i>￥</i>
                                                    <span>{item.price}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </section>
            </div>

        </div>
    }
}

let mapState = (state) => {
    return state
}
export default connect(mapState, actionCreator)(Shouye)